<template>
  <el-drawer
    :model-value="isVisible"
    :title="title"
    :before-close="hanleCloseDrawer"
    size="20%"
    custom-class="drawerdialog"
  >
  <el-scrollbar>
    <div class="goods-list">
      <div class="goods-item" v-for="goods in goodsData" :key="goods.goods_id">
        <div class="goods-img" align="center">
          <el-image :src="goods.imgurl_150"/>
        </div>
        <div class="goods-msg">
          <div class="goods-title txtclamp2">{{goods.goods_name}}</div>
          <div class="goods-price">
            <span>价格：<mark>{{goods.goods_price}}</mark></span>
            <span class="ml15">市场价：<mark>{{goods.market_price}}</mark></span>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
  </el-drawer>
</template>

<script>
  import {  computed } from 'vue'
  import { getGoodsBatchInfo } from "@/api/media/goods";

  export default {
    name: "GoodsDrawer",
    props: {
      isVisible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '商品列表'
      },
      goodsData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    emits: ['closeGoodsDrawer'],
    setup(props, { emit }) {
      const hanleCloseDrawer = () => {
        emit('closeGoodsDrawer')
      }
      const goods_id = computed(() => {
        let goodsIds = []
        props.goodsData.forEach(row => {
          goodsIds.push(row.goodsid)
        })
        return goodsIds
      })
      const getGoodsDetailList = () => {
        if (goods_id.value.length > 0) {
          getGoodsBatchInfo({goods_id: goods_id.value.join(',')}).then(response => {
            if (response.errcode == 0) {
              props.goodsData.forEach(goods => {
                response.data.forEach(row => {
                  if (goods.goodsid == row.goods_id) {
                    Object.assign(goods, row)
                  }
                })
              })
            }
          })
        }
      }
      const init = () => {
        getGoodsDetailList()
      }
      return {
        init,
        hanleCloseDrawer,
      }
    }
  }
</script>

<style scoped lang="scss">
  .goods-item{
    margin-bottom: 30px;
    .goods-title{
      margin:5px 0 8px;
      color:#333;
    }
  }
  .goods-price{
    mark{background: none;color:rgb(255, 73, 73)}
  }
  
</style>
<style lang="scss">
.drawerdialog{
  .el-drawer__body{
    overflow:auto;
    padding-top:0;
  }
  .el-drawer__header{
    margin-bottom:22px;
  }
}
</style>
